feat: Dashboard groups with tabs, collapsible/bordered options, and panel organization by alex-fedotyev · Pull Request #1972 · hyperdxio/hyperdx

alex-fedotyev · 2026-03-23T20:03:15Z

Summary

Dashboard organization feature: tiles can be organized into Groups — collapsible, optionally bordered containers with smart tab support, reordering via drag handles, and cross-container tile moves.

Concepts

Group — A container for tiles. Always has at least 1 tab internally. Configurable:
- Collapsible (default true) — chevron toggle, collapse state stored in URL params
- Bordered (default true) — visual border around the group
- Tabbed — tab bar appears automatically when a group has 2+ tabs. Tiles belong to a specific tab via tabId.
Container schema — No type discriminator. Containers are defined by properties (collapsible, bordered, tabs). Designed to be extensible via discriminated union if other container types are needed in the future (e.g. markdown blocks, alert rows, embeds).

Features

Add groups via + Add → "New Group"
Collapse/expand groups (chevron toggle, URL-persisted state)
Toggle collapsible and bordered per-group via overflow menu
"Collapse by Default" option in overflow menu
Add/rename/delete tabs within a group
Move tiles between groups and tabs via dropdown
Select multiple tiles (Shift+click) → group them (Cmd+G)
Reorder groups via drag handles
Inline rename for group headers and tab names (double-click)
Delete group with confirmation dialog

Implementation

Schema: DashboardContainerSchema in common-utils/types.ts with collapsible, bordered, tabs (optional), activeTabId
Component: GroupContainer — unified component (replaced separate SectionHeader)
Hooks: useDashboardContainers (container CRUD + tab lifecycle), useTileSelection (multi-select + Cmd+G)
DnD: @dnd-kit for container reordering, custom DashboardDndContext

PRs

refactor: Unify section/group into single Group with collapsible/bordered options #2015 — Main implementation (unified group, collapsible/bordered options, schema cleanup)

References

Builds on feat: Collapsible sections — authoring UX + DashboardContainer abstraction #1926 (authoring UX + DashboardContainer abstraction)
Integrates with Move section collapse state to URL query params #1958 (URL-based collapse state)

changeset-bot · 2026-03-23T20:03:20Z

⚠️ No Changeset found

Latest commit: ab2945e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2026-03-23T20:03:20Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Mar 24, 2026 3:57pm

github-actions · 2026-03-23T20:05:04Z

Knip - Unused Code Analysis

⚪ No changes detected (231 issues on both main and PR)

What is this?

Knip finds unused files, dependencies, and exports in your codebase.
This comment compares the PR branch against main to detect regressions.

Run yarn knip locally to see full details.

github-actions · 2026-03-23T20:05:56Z

PR Review

❌ 9 binary PNGs committed to pr-screenshots/ → Remove from repo; upload screenshots directly to the PR description as GitHub attachments instead. Binary blobs in source history are permanent and inflate clone size.
⚠️ escape hotkey in useTileSelection fires globally (useTileSelection.ts:62) → Will clear tile selection while user is typing in modals, rename inputs, or any other Escape-sensitive UI. Guard with a focus check or only register when tiles are selected (selectedTileIds.size > 0).
⚠️ calculateNextTilePosition ignores new tile's height when checking row fit (tilePositioning.ts) → Algorithm finds horizontal space at row Y but doesn't verify rows [Y, Y+newH) are clear. A new tile placed at y=0 with h=5 can visually overlap tiles starting at y=2. React-grid-layout will compensate on layout change, but initial placement can cause a jarring visual push.
⚠️ handleGroupSelected doesn't reposition tiles (useTileSelection.ts:35-51) → Tiles grouped via Cmd+G keep their original x/y coordinates from the full dashboard. Tiles scattered across the page (e.g. x=0,y=50 and x=12,y=2) will appear sparsely distributed inside the new section until manually rearranged. Consider calling calculateNextTilePosition per tile as they're assigned to the new container.
⚠️ activeTabId persisted to server on every tab click (useDashboardContainers.tsx:273-282) → All viewers share the same active tab. The comment calls this intentional (Grafana/Kibana pattern), but this is a write on every tab interaction by any viewer. Consider if this needs debouncing or if it should be viewer-local state to avoid write amplification on busy dashboards.
🔍 _handleToggleSectionDB destructured but never used (DBDashboardPage.tsx) → The _-prefix suppresses lint, but it still imports and runs the hook for a feature (server-persist toggle) that's disabled. If URL-based toggle is the intended behavior long-term, remove the unused export from useDashboardContainers.

github-actions · 2026-03-23T20:09:29Z

E2E Test Results

✅ All tests passed • 92 passed • 3 skipped • 1012s

Status	Count
✅ Passed	92
❌ Failed	0
⚠️ Flaky	2
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

Add 'group' type alongside 'section'. Groups always have tabs array (min 1 tab). 1 tab = plain group, 2+ = tab bar. Tiles get optional tabId for tab assignment. activeTabId persisted like collapsed state (Grafana/Kibana shared view state pattern).

DashboardDndContext (116 lines): sortable container reorder provider. DashboardDndComponents (98 lines): EmptyContainerPlaceholder with full-width [+ Add] button, SortableSectionWrapper.

1 tab = plain header (group identity IS the first tab). 2+ tabs = tab bar with hover-only x, inline +, double-click rename. stopPropagation on rename inputs to prevent Cmd+Left bubbling. Render-prop children(activeTabId). Theme-aware borders.

Grip icon on hover. stopPropagation on rename input keyboard events. Theme-aware var(--mantine-color-default-border).

useDashboardContainers (280 lines): section/group CRUD, tab management. Groups created with 1 tab. Add Tab creates 2nd. Delete to 1 keeps tab. Header rename syncs tabs[0]. Always-confirm delete. handleTabChange intentionally persists activeTabId (documented). useTileSelection (76 lines): Shift+click + Cmd+G grouping. Clears tabId on grouped tiles to prevent orphaned tab assignments.

Fill-right-then-wrap tile positioning via calculateNextTilePosition (w=8, h=10 matching original defaults). Floating drag bar on hover (no content shift). Move dropdown: tab targets shown as pipe-separated siblings with target in normal weight, others dimmed (Logs | Metrics). Section empty state wired with onAddTile. Cross-container moves via dropdown. Delete confirmation always shown. Select-and-group Cmd+G. makeId uses larger ID space to reduce collision probability.

54 tests: group always has 1 tab, add tab creates 2nd, title syncs from tabs[0], delete to 1 keeps tab, fill-right positioning, tabId cleanup on grouping, section reorder, tile grouping.

Temporary — remove before merge.

knudtty · 2026-03-27T18:04:58Z

Hey, sorry not going to get to this today. I'll follow up after the weekend

MikeShi42 · 2026-03-29T20:09:15Z

@alex-fedotyev one thing that wasn't clear to me when checking out is what the main difference between groups and sections are. I understand sections can collapse, and groups can't. But is there a reason why we don't have collapsible groups (and then no longer need sections?)

alex-fedotyev · 2026-03-30T19:17:51Z

one thing that wasn't clear to me when checking out is what the main difference between groups and sections are. I understand sections can collapse, and groups can't. But is there a reason why we don't have collapsible groups (and then no longer need sections?)

@MikeShi42 - Great question — I've been thinking through this and I see two real options:

Option A: Two types, better names

Rename "Section" → "Row". Keep "Group" as the bordered container with optional tabs.

Row — lightweight, collapsible header, no border. Purely organizational, like an <h2> that owns everything below it until the next row.
Group — bordered container with optional tabs. Not collapsible — its value is showing content, either directly or through tabs.

Benefits:

Each concept has a distinct visual identity and a clear verb — rows collapse, groups contain
"Row" is the standard term most dashboarding tools use for this concept — users coming from other platforms will recognize it immediately
Lightweight rows keep dashboards visually clean when you just want to organize, not contain
Tabs only exist on groups, which makes sense — tabs need a visual container to belong to
Keeping rows and groups separate provides a cleaner path for variable-driven automation. Row repeat (duplicating a row for each variable value) is a natural fit for rows and a well-established pattern in dashboarding tools. Tab repeat (dynamically generating tabs from variable values) is a different interaction model that maps naturally to groups. Two types keeps those doors open without overloading a single concept.
Conditional tabs (e.g., show a tab only when a variable matches a condition) are a natural future extension for groups. When all tabs are filtered out, a group with no visible tabs simply disappears — no empty bordered box on the dashboard. Rows remain as the stable organizational structure regardless of which groups are visible.

Tradeoff: two concepts to learn, but the names make the distinction obvious.

Option B: One type, always bordered

Drop section/row entirely. Just "Group" — always bordered, always collapsible, optionally tabbed.

Benefits:

One concept, nothing to choose between
Closer to what most OOTB application monitoring vendors do (single "group" primitive)
Simpler schema, simpler code, simpler docs

Tradeoff: every organizational element is a bordered box, which makes dashboards visually heavier. Users who just want a collapsible label to divide their dashboard into logical areas (the most common organizational pattern in dashboarding tools) are forced into bordered containers. Variable-driven repeat would need to handle both row-style duplication and tab-style generation within a single type, making the automation model more complex. Conditional tabs that filter out all visible tabs leave an empty bordered box — either shown (looks broken) or hidden (implicit disappearance is confusing).

Stretch: A style property (bordered | minimal) could be added later to let groups render without a border. However, this effectively reintroduces two visual types under one schema type — with the added complexity that tabs on a minimal group need special handling (a tab bar without a container border looks visually unanchored).

My recommendation: Option A

The real issue isn't that there are two types — it's that "section" and "group" sound like synonyms. Renaming section to "row" makes the distinction self-evident. And keeping a lightweight option matters — not every dashboard needs boxes, but almost every large dashboard needs collapsible dividers.

…ered options (#2015) ## Summary Merges the separate "section" and "group" container types into a single **DashboardContainer** concept with configurable options: - **Collapsible** (optional, default true) — chevron toggle with URL-based collapse state - **Bordered** (optional, default true) — visual border around the container - **Tabbed** (optional) — add tabs to any container; tab bar appears with 2+ tabs. Active tab is per-viewer via URL state. - **Alert indicators** — red dot on tabs (multi-tab groups) and on the group header (plain/collapsed) when a tile is in `AlertState.ALERT`, so an alerting group is visible at a glance even when the alerting tile is below the fold This addresses the UX concern from #1972 that "section" and "group" are near-synonyms that force users to choose between two similar concepts. ### Screenshots **Dashboard with groups and tabs (expanded):** ![Groups with tabs](https://raw.githubusercontent.com/hyperdxio/hyperdx/feat/unified-group-backup/pr-screenshots/01-groups-with-tabs.png) **Overflow menu (Add Tab, Collapse, Border, Delete):** ![Overflow menu](https://raw.githubusercontent.com/hyperdxio/hyperdx/feat/unified-group-backup/pr-screenshots/02-overflow-menu.png) **Collapsed with pipe-separated tab names (Overview | Latency | Errors):** ![Collapsed](https://raw.githubusercontent.com/hyperdxio/hyperdx/feat/unified-group-backup/pr-screenshots/05-collapsed-pipe-tabs.png) ### Commits (review guide) | Area | What to review | |------|----------------| | **Schema** — `types.ts` | new optional fields (`tabs`, `collapsible`, `bordered`, `activeTabId`, `tabId`); `type` discriminator removed | | **DnD infrastructure** | `DashboardDndContext.tsx`, `DashboardDndComponents.tsx`: sortable wrappers, drag handle | | **`DashboardContainer`** | `DashboardContainer.tsx` + `GroupTabBar.tsx`: unified component with tabs, collapse, borders, alerts, a11y | | **Hooks** | `useDashboardContainers.tsx`: container/tab CRUD. `useTileSelection.ts`: multi-select + Cmd+G (auto-deletes emptied source containers) | | **Dashboard page** | `DBDashboardPage.tsx`: wiring, alert computation, DnD, tile positioning, URL-based active-tab + collapse state | | **Tests** | `DashboardContainer.test.tsx`, `useDashboardContainers.test.tsx`, `useTileSelection.test.tsx`, `dashboardSections.test.tsx` | ### Key decisions - **No `type` discriminator** — containers are defined by properties. Extensible via additional fields later (e.g., planned variable-repeat feature could add `repeat: { filterId; as: 'tabs' \| 'sections' }` cleanly onto the same container). - **Collapsed label** — pipe-separated tab names (max 4 + "…"), not dot-separated, no duplicate header. - **Alert indicators** — red dot on tabs with `AlertState.ALERT` tiles. Also shown at the group-header level when no tab bar is rendered (plain/collapsed), so a single alerting tile in a large dashboard isn't hidden. - **Accessibility** — chevron has role/tabIndex/aria-expanded/onKeyDown. Hidden controls removed from tab order. - **Per-viewer UI state via URL** — collapse/expand and active-tab are per-viewer (URL), falling back to DB defaults. Switching tabs in your browser doesn't affect another viewer's session. - **Tab delete confirmation** — deleting a tab with tiles opens a 3-button modal: Cancel / Move Tiles to [first remaining tab] / Delete Tab & Tiles. Destructive option is the red primary. - **Group delete confirmation** — deleting a group with tiles opens a 3-button modal: Cancel / Ungroup Tiles / Delete Group & Tiles. Ungroup preserves tiles as top-level; Delete removes them. Works consistently for plain groups, legacy sections, and multi-tab groups (all tiles across all tabs are handled). ### Backward compatibility - Dashboards without containers render as before - Old `type: 'section'` containers parse successfully (Zod strips extra field) - New optional fields (`collapsible`, `bordered`, `tabs`, `activeTabId`, `tabId`) — `undefined` treated as defaults - No Mongoose migration needed: the `containers` field is a schemaless `Schema.Types.Array`; all validation happens at the Zod layer - Covered by tests: `useDashboardContainers.test.tsx` "legacy dashboard upgrade path" and `dashboardSections.test.tsx:273` "old dashboards with type field still parse" ### Review feedback addressed - ✅ Semantic tokens everywhere (replaced raw Mantine color tokens) - ✅ Mantine components over raw HTML / `style` props - ✅ Component decomposition — `GroupTabBar` extracted from the main component; `DashboardContainerRow` extracted from inline render in `DBDashboardPage` - ✅ Accessibility — chevron a11y, hidden controls removed from tab order - ✅ URL state for per-viewer UI (`activeTabId` + collapse/expand) — the only non-structural `setDashboard` call migrated off the server - ✅ Renamed `GroupContainer` → `DashboardContainer` to match the schema type - ✅ Auto-delete emptied source containers after Cmd+G regrouping - ✅ 3-option prompt for group delete (Cancel / Ungroup Tiles / Delete Group & Tiles) - ✅ Alert dot now appears on expanded plain/single-tab group headers (previously only on collapsed) - ✅ Fix: spurious `setDashboard` on every tile drag in multi-tab containers (layout handler was built with all-tab tiles but RGL only renders visible-tab tiles) - ✅ Take viewer to newly-created tab after Add Tab (clears stale URL override) - ✅ Removed redundant WHAT-style comments; kept WHY / invariant comments - ✅ Removed dead API surface (unused `handleToggleCollapsed` export from the hook) - ✅ Documented the `:` separator invariant in the `activeTabs` URL param ## Test plan - [x] 1515 app unit tests pass - [x] 745 common-utils unit tests pass - [x] ESLint clean across all packages (`make ci-lint`) - [x] TypeScript clean (app, common-utils, api) - [x] Changeset included - [x] Verified on Vercel preview Builds on #1972

…ered options (hyperdxio#2015) ## Summary Merges the separate "section" and "group" container types into a single **DashboardContainer** concept with configurable options: - **Collapsible** (optional, default true) — chevron toggle with URL-based collapse state - **Bordered** (optional, default true) — visual border around the container - **Tabbed** (optional) — add tabs to any container; tab bar appears with 2+ tabs. Active tab is per-viewer via URL state. - **Alert indicators** — red dot on tabs (multi-tab groups) and on the group header (plain/collapsed) when a tile is in `AlertState.ALERT`, so an alerting group is visible at a glance even when the alerting tile is below the fold This addresses the UX concern from hyperdxio#1972 that "section" and "group" are near-synonyms that force users to choose between two similar concepts. ### Screenshots **Dashboard with groups and tabs (expanded):** ![Groups with tabs](https://raw.githubusercontent.com/hyperdxio/hyperdx/feat/unified-group-backup/pr-screenshots/01-groups-with-tabs.png) **Overflow menu (Add Tab, Collapse, Border, Delete):** ![Overflow menu](https://raw.githubusercontent.com/hyperdxio/hyperdx/feat/unified-group-backup/pr-screenshots/02-overflow-menu.png) **Collapsed with pipe-separated tab names (Overview | Latency | Errors):** ![Collapsed](https://raw.githubusercontent.com/hyperdxio/hyperdx/feat/unified-group-backup/pr-screenshots/05-collapsed-pipe-tabs.png) ### Commits (review guide) | Area | What to review | |------|----------------| | **Schema** — `types.ts` | new optional fields (`tabs`, `collapsible`, `bordered`, `activeTabId`, `tabId`); `type` discriminator removed | | **DnD infrastructure** | `DashboardDndContext.tsx`, `DashboardDndComponents.tsx`: sortable wrappers, drag handle | | **`DashboardContainer`** | `DashboardContainer.tsx` + `GroupTabBar.tsx`: unified component with tabs, collapse, borders, alerts, a11y | | **Hooks** | `useDashboardContainers.tsx`: container/tab CRUD. `useTileSelection.ts`: multi-select + Cmd+G (auto-deletes emptied source containers) | | **Dashboard page** | `DBDashboardPage.tsx`: wiring, alert computation, DnD, tile positioning, URL-based active-tab + collapse state | | **Tests** | `DashboardContainer.test.tsx`, `useDashboardContainers.test.tsx`, `useTileSelection.test.tsx`, `dashboardSections.test.tsx` | ### Key decisions - **No `type` discriminator** — containers are defined by properties. Extensible via additional fields later (e.g., planned variable-repeat feature could add `repeat: { filterId; as: 'tabs' \| 'sections' }` cleanly onto the same container). - **Collapsed label** — pipe-separated tab names (max 4 + "…"), not dot-separated, no duplicate header. - **Alert indicators** — red dot on tabs with `AlertState.ALERT` tiles. Also shown at the group-header level when no tab bar is rendered (plain/collapsed), so a single alerting tile in a large dashboard isn't hidden. - **Accessibility** — chevron has role/tabIndex/aria-expanded/onKeyDown. Hidden controls removed from tab order. - **Per-viewer UI state via URL** — collapse/expand and active-tab are per-viewer (URL), falling back to DB defaults. Switching tabs in your browser doesn't affect another viewer's session. - **Tab delete confirmation** — deleting a tab with tiles opens a 3-button modal: Cancel / Move Tiles to [first remaining tab] / Delete Tab & Tiles. Destructive option is the red primary. - **Group delete confirmation** — deleting a group with tiles opens a 3-button modal: Cancel / Ungroup Tiles / Delete Group & Tiles. Ungroup preserves tiles as top-level; Delete removes them. Works consistently for plain groups, legacy sections, and multi-tab groups (all tiles across all tabs are handled). ### Backward compatibility - Dashboards without containers render as before - Old `type: 'section'` containers parse successfully (Zod strips extra field) - New optional fields (`collapsible`, `bordered`, `tabs`, `activeTabId`, `tabId`) — `undefined` treated as defaults - No Mongoose migration needed: the `containers` field is a schemaless `Schema.Types.Array`; all validation happens at the Zod layer - Covered by tests: `useDashboardContainers.test.tsx` "legacy dashboard upgrade path" and `dashboardSections.test.tsx:273` "old dashboards with type field still parse" ### Review feedback addressed - ✅ Semantic tokens everywhere (replaced raw Mantine color tokens) - ✅ Mantine components over raw HTML / `style` props - ✅ Component decomposition — `GroupTabBar` extracted from the main component; `DashboardContainerRow` extracted from inline render in `DBDashboardPage` - ✅ Accessibility — chevron a11y, hidden controls removed from tab order - ✅ URL state for per-viewer UI (`activeTabId` + collapse/expand) — the only non-structural `setDashboard` call migrated off the server - ✅ Renamed `GroupContainer` → `DashboardContainer` to match the schema type - ✅ Auto-delete emptied source containers after Cmd+G regrouping - ✅ 3-option prompt for group delete (Cancel / Ungroup Tiles / Delete Group & Tiles) - ✅ Alert dot now appears on expanded plain/single-tab group headers (previously only on collapsed) - ✅ Fix: spurious `setDashboard` on every tile drag in multi-tab containers (layout handler was built with all-tab tiles but RGL only renders visible-tab tiles) - ✅ Take viewer to newly-created tab after Add Tab (clears stale URL override) - ✅ Removed redundant WHAT-style comments; kept WHY / invariant comments - ✅ Removed dead API surface (unused `handleToggleCollapsed` export from the hook) - ✅ Documented the `:` separator invariant in the `activeTabs` URL param ## Test plan - [x] 1515 app unit tests pass - [x] 745 common-utils unit tests pass - [x] ESLint clean across all packages (`make ci-lint`) - [x] TypeScript clean (app, common-utils, api) - [x] Changeset included - [x] Verified on Vercel preview Builds on hyperdxio#1972

alex-fedotyev self-assigned this Mar 23, 2026

vercel Bot deployed to Preview March 23, 2026 20:06 View deployment

vercel Bot deployed to Preview March 23, 2026 20:11 View deployment

vercel Bot deployed to Preview March 23, 2026 20:25 View deployment

vercel Bot deployed to Preview March 23, 2026 20:42 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch from 9d1a5c2 to 0d2b11f Compare March 23, 2026 20:56

vercel Bot deployed to Preview March 23, 2026 21:06 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch 2 times, most recently from a7afc78 to fd8799e Compare March 23, 2026 21:14

vercel Bot deployed to Preview March 23, 2026 21:16 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch from fd8799e to 20a628e Compare March 23, 2026 21:37

vercel Bot deployed to Preview March 23, 2026 21:39 View deployment

vercel Bot deployed to Preview March 23, 2026 21:43 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch from d65d046 to 0fb0522 Compare March 23, 2026 21:47

vercel Bot deployed to Preview March 23, 2026 21:50 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch from 0fb0522 to e38c98b Compare March 23, 2026 21:51

vercel Bot deployed to Preview March 23, 2026 21:54 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch from e38c98b to 74ee92a Compare March 23, 2026 21:56

vercel Bot deployed to Preview March 23, 2026 21:59 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch from 74ee92a to 4aee30f Compare March 23, 2026 22:02

vercel Bot deployed to Preview March 23, 2026 22:05 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch from 4aee30f to ae5981a Compare March 23, 2026 22:20

vercel Bot deployed to Preview March 23, 2026 22:23 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch from ae5981a to 82579ce Compare March 23, 2026 23:35

vercel Bot deployed to Preview March 23, 2026 23:37 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch from d7cd008 to 24f3b5f Compare March 24, 2026 15:03

vercel Bot deployed to Preview March 24, 2026 15:06 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch from 24f3b5f to d1c641a Compare March 24, 2026 15:12

vercel Bot deployed to Preview March 24, 2026 15:16 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch 2 times, most recently from 1b87b14 to ca82900 Compare March 24, 2026 15:23

alex-fedotyev added 5 commits March 24, 2026 08:26

feat: Add @dnd-kit infrastructure for container reordering

1fead9d

DashboardDndContext (116 lines): sortable container reorder provider. DashboardDndComponents (98 lines): EmptyContainerPlaceholder with full-width [+ Add] button, SortableSectionWrapper.

feat: Add drag handle to SectionHeader, fix theme borders

28749b2

Grip icon on hover. stopPropagation on rename input keyboard events. Theme-aware var(--mantine-color-default-border).

vercel Bot deployed to Preview March 24, 2026 15:26 View deployment

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch from ca82900 to c363674 Compare March 24, 2026 15:33

vercel Bot deployed to Preview March 24, 2026 15:36 View deployment

test: Add tests for containers, tabs, reordering, and grouping

62f8b3d

54 tests: group always has 1 tab, add tab creates 2nd, title syncs from tabs[0], delete to 1 keeps tab, fill-right positioning, tabId cleanup on grouping, section reorder, tile grouping.

alex-fedotyev force-pushed the feat/dashboard-dnd-organization branch from c363674 to 62f8b3d Compare March 24, 2026 15:37

vercel Bot deployed to Preview March 24, 2026 15:40 View deployment

docs: Add PR screenshots for review

ab2945e

Temporary — remove before merge.

vercel Bot deployed to Preview March 24, 2026 15:57 View deployment

alex-fedotyev requested a review from knudtty March 26, 2026 16:34

alex-fedotyev mentioned this pull request Mar 30, 2026

refactor: Unify section/group into single Group with collapsible/bordered options #2015

Merged

6 tasks

alex-fedotyev marked this pull request as draft April 3, 2026 16:01

alex-fedotyev changed the title ~~feat: Dashboard sections, groups with tabs, and panel organization~~ feat: Dashboard groups with tabs, collapsible/bordered options, and panel organization Apr 3, 2026

alex-fedotyev closed this Apr 3, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Dashboard groups with tabs, collapsible/bordered options, and panel organization#1972

feat: Dashboard groups with tabs, collapsible/bordered options, and panel organization#1972
alex-fedotyev wants to merge 8 commits intomainfrom
feat/dashboard-dnd-organization

alex-fedotyev commented Mar 23, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

knudtty commented Mar 27, 2026

Uh oh!

MikeShi42 commented Mar 29, 2026

Uh oh!

alex-fedotyev commented Mar 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

alex-fedotyev commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Concepts

Features

Implementation

PRs

References

Uh oh!

changeset-bot Bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel Bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Knip - Unused Code Analysis

Uh oh!

github-actions Bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Uh oh!

github-actions Bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E Test Results

Uh oh!

knudtty commented Mar 27, 2026

Uh oh!

MikeShi42 commented Mar 29, 2026

Uh oh!

alex-fedotyev commented Mar 30, 2026

Option A: Two types, better names

Option B: One type, always bordered

My recommendation: Option A

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alex-fedotyev commented Mar 23, 2026 •

edited

Loading

changeset-bot Bot commented Mar 23, 2026 •

edited

Loading

vercel Bot commented Mar 23, 2026 •

edited

Loading

github-actions Bot commented Mar 23, 2026 •

edited

Loading

github-actions Bot commented Mar 23, 2026 •

edited

Loading

github-actions Bot commented Mar 23, 2026 •

edited

Loading